<template>
  <div class="time-picker-fixed">
    <div class="time-picker">
      <div class="slider-container">
        <button class="play-pause-button" @click="togglePlayPause">
          {{ isPlaying ? "暂停" : "开始" }}
        </button>
      </div>
      <div class="date-picker">
        <input
          type="date"
          v-model="selectedDate"
          @input="updateTime"
          class="custom-date-input"
          :min="'2023-08-02'"
          :max="'2023-08-04'"
        />
      </div>
      <div class="time-selection">
        <select v-model="selectedTime" @change="updateTime">
          <option
            v-for="(option, index) in timeOptions"
            :key="index"
            :value="option"
          >
            {{ option }}
          </option>
        </select>
      </div>

      <div class="time-slider">
        <input
          type="range"
          class="slider"
          min="0"
          max="1439"
          step="15"
          v-model="startMinutes"
          @input="updateStartTime"
          @change="updateSliderPosition"
          @mousedown="isDragging = true"
          @mouseup="isDragging = false"
        />

        <div class="slider-labels">
          <div
            v-for="minute in 240"
            :key="minute"
            class="slider-tick"
            :style="{ left: (minute * 100) / 240 + '%' }"
          ></div>
        </div>
      </div>
      <div class="selected-time">
        {{ selectedDate }} {{ formattedStartTime }}
      </div>
    </div>
  </div>
</template>

<script>
let intervalId = null;
let playIndex = -1;

export default {
  data() {
    return {
      startMinutes: 0,
      isPlaying: false,
      selectedDate: "2023-08-02",
      selectedTime: "00:00",
      timeOptions: ["00:00"],
    };
  },
  computed: {
    selectedTimestamp() {
      return this.selectedTime;
    },
    formattedStartTime() {
      const [hours, minutes] = this.selectedTime.split(":");
      return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(
        2,
        "0"
      )}`;
    },
  },
  methods: {
    formattedTime(timestamp) {
      return `${String(timestamp.hour).padStart(2, "0")}:${String(
        timestamp.minute
      ).padStart(2, "0")}`;
    },
    updateTime() {
      this.$emit("time-range-selected", {
        date: this.selectedDate,
        start: this.formattedStartTime,
      });
    },
    updateStartTime() {
      this.updateTime();
      if (this.isPlaying) {
        this.playTime();
      }
    },
    togglePlayPause() {
      if (!this.selectedDate) {
        const year = 2023;
        const month = 8;
        const day = 2;
        this.selectedDate = `${year}-${String(month).padStart(2, "0")}-${String(
          day
        ).padStart(2, "0")}`;
      }

      if (this.isPlaying)
      {
          clearInterval(intervalId);
      }
      else {
          playIndex = this.availableTimestamps.findIndex(
            (time) =>
              time.year === parseInt(this.selectedDate.split("-")[0]) &&
              time.month === parseInt(this.selectedDate.split("-")[1]) &&
              time.day === parseInt(this.selectedDate.split("-")[2]) &&
              time.hour === parseInt(this.selectedTime.split(":")[0]) &&
              time.minute === parseInt(this.selectedTime.split(":")[1])
          );

          const dateIndex0 = this.availableTimestamps.findIndex(
            (time) =>
              time.year === parseInt(this.selectedDate.split("-")[0]) &&
              time.month === parseInt(this.selectedDate.split("-")[1]) &&
              time.day === parseInt(this.selectedDate.split("-")[2]) &&
              time.hour === 0 &&
              time.minute === 0
          );
          playIndex = playIndex - dateIndex0
          if (playIndex === -1) {
            playIndex = 0;
          }
          this.startMinutes = parseInt(this.selectedTime.split(":")[0]) * 60 +  parseInt(this.selectedTime.split(":")[1])

          this.$nextTick(() => {
            intervalId = setInterval(this.playTime, 8000);
            this.playTime();
          });
      }
      this.isPlaying = !this.isPlaying;
      this.updateTime();
    },
    playTime() {
      if (this.isPlaying) {
        if (playIndex < this.timeOptions.length - 1) {
          playIndex++;
        } else {
          playIndex = 0;
        }
        const [hours, minutes] = this.timeOptions[playIndex].split(":");
        this.startMinutes = parseInt(hours) * 60 + parseInt(minutes);
        this.selectedTime = this.timeOptions[playIndex];
        this.updateTime();
        this.updateSliderPosition();
      }
    },

    updateSliderPosition() {
      this.currentSliderPosition = (this.startMinutes * 100) / 1439;

      if (!this.isPlaying) {
        const hours = Math.floor(this.startMinutes / 60);
        const minutes = this.startMinutes % 60;
        this.selectedTime = `${String(hours).padStart(2, "0")}:${String(
          minutes
        ).padStart(2, "0")}`;
        this.updateTime();
      }
    },
    updateTimeOptions() {
      this.timeOptions = this.availableTimestamps
        .filter(
          (timestamp) =>
            timestamp.year === parseInt(this.selectedDate.split("-")[0]) &&
            timestamp.month === parseInt(this.selectedDate.split("-")[1]) &&
            timestamp.day === parseInt(this.selectedDate.split("-")[2])
        )
        .map((timestamp) => this.formattedTime(timestamp)); // 正确的方法名
    },
  },
  watch: {
    selectedDate(newDate, oldDate) {
      this.updateTimeOptions();
    },
    selectedTime(newTime, oldTime) {
      // 当 selectedTime 变化时，更新滑块位置
      this.startMinutes =
        parseInt(newTime.split(":")[0]) * 60 + parseInt(newTime.split(":")[1]);
    },
    startMinutes(newMinutes, oldMinutes) {
      if (this.isPlaying) {
        // 在播放状态下，滑块位置变化后，更新当前时间和小时分钟选择框
        const hours = Math.floor(newMinutes / 60);
        const minutes = newMinutes % 60;
        this.selectedTime = `${String(hours).padStart(2, "0")}:${String(
          minutes
        ).padStart(2, "0")}`;
        this.updateTime();
        // console.log("小时：分钟",this.selectedTime);
      }
    },
  },
  created() {
    this.availableTimestamps = [

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 0,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 1,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 1,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 2,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 4,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 4,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 5,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 5,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 6,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 7,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 8,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 8,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 10,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 10,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 11,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 12,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 13,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 13,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 14,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 14,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 15,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 16,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 16,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 17,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 17,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 18,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 19,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 20,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 20,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 21,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 22,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 22,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 2,
    hour: 23,
    minute: 0
},
//32
{
    year: 2023,
    month: 8,
    day: 3,
    hour: 0,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 1,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 1,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 2,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 2,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 3,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 4,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 4,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 5,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 5,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 6,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 7,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 7,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 8,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 8,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 9,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 10,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 10,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 11,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 11,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 12,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 13,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 13,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 14,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 14,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 15,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 16,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 16,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 17,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 17,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 18,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 19,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 19,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 20,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 21,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 22,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 22,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 23,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 3,
    hour: 23,
    minute: 15
},
//71
{
    year: 2023,
    month: 8,
    day: 4,
    hour: 0,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 1,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 1,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 2,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 3,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 4,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 4,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 5,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 5,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 6,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 7,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 7,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 8,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 8,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 9,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 10,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 10,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 11,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 12,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 13,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 13,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 14,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 14,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 15,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 16,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 16,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 17,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 17,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 18,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 19,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 19,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 20,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 20,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 21,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 22,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 22,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 23,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 4,
    hour: 23,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 0,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 1,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 1,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 2,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 2,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 3,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 4,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 4,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 5,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 5,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 6,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 7,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 7,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 8,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 8,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 9,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 10,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 10,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 11,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 11,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 12,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 13,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 13,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 14,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 14,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 15,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 16,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 16,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 17,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 17,
    minute: 15
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 18,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 19,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 19,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 20,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 21,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 22,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 22,
    minute: 45
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 23,
    minute: 0
},

{
    year: 2023,
    month: 8,
    day: 10,
    hour: 23,
    minute: 15
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 0,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 4,
    minute: 45
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 5,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 5,
    minute: 15
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 6,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 7,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 7,
    minute: 45
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 8,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 8,
    minute: 15
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 9,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 10,
    minute: 45
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 11,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 11,
    minute: 15
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 12,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 13,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 13,
    minute: 45
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 14,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 14,
    minute: 15
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 15,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 16,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 16,
    minute: 45
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 17,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 17,
    minute: 15
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 18,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 19,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 19,
    minute: 45
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 20,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 20,
    minute: 15
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 21,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 22,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 22,
    minute: 45
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 23,
    minute: 0
},

{
    year: 2023,
    month: 9,
    day: 3,
    hour: 23,
    minute: 15
},
    ];
    this.updateTimeOptions();
  },
  beforeUnmount() {
  if (intervalId) {
    clearInterval(intervalId)
    intervalId = null
  }
}
};
</script>

<style scoped>
.time-picker-fixed {
  position: fixed;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  background-color: transparent;
}
.time-picker {
  justify-content: center;
  width: 1200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 3px solid #007bff;
  padding: 20px;
  border-radius: 8px;
  background-color: #f0f0f0;
}
.date-picker {
  margin-right: 20px;
}
.custom-date-input {
  border: 2px solid #007bff;
  padding: 8px;
  border-radius: 4px;
  font-size: 16px;
  color: #007bff;
  background-color: transparent;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}
.custom-date-input:hover {
  border-color: darkblue;
  background-color: rgba(0, 0, 255, 0.1);
  color: darkblue;
}
.slider-container {
  display: flex;
  align-items: center;
  width: 70px;
  margin-right: 20px;
}
.time-slider {
  width: 1000px;
}
.slider {
  width: 100%;
}
.slider-label {
  flex: 0 0 auto;
  margin-right: 10px;
}
.selected-time {
  font-size: 18px;
  font-weight: bold;
}
.play-pause-button {
  border: 2px solid #007bff;
  background-color: transparent;
  color: #007bff;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  margin-right: 10px;
}
.play-pause-button:hover {
  background-color: blue;
  color: white;
}
.time-selection {
  display: flex;
  align-items: center;
}
.time-selection select {
  padding: 8px;
  border: 2px solid #007bff;
  border-radius: 4px;
  font-size: 16px;
  color: #007bff;
  background-color: transparent;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}
.time-selection select:hover {
  border-color: darkblue;
  background-color: rgba(0, 0, 255, 0.1);
  color: darkblue;
}
.time-selection span {
  margin: 0 8px;
  font-size: 16px;
}
</style>
